<template>
  <el-form label-width="80px" :model="businessObject">
    <el-collapse v-model="isCollapse">
      <el-collapse-item name="1">
        <template #title>
          <div class="w-full h-12 pl-2.5">
            <span>基础信息</span>
          </div>
        </template>
        <div class="w-full border-t p-2.5">
          <el-form-item label="节点ID" prop="name">
            <el-input disabled v-model="businessObject.id" />
          </el-form-item>
          <el-form-item label="节点名称" prop="name">
            <el-input placeholder="请输入节点名称" v-model="businessObject.name" />
          </el-form-item>
        </div>
      </el-collapse-item>
      <el-collapse-item name="2">
        <template #title>
          <div class="w-full h-12 pl-2.5">
            <span>任务执行</span>
          </div>
        </template>
        <div class="w-full border-t p-2.5">
          <TaskExecute v-model="businessObject.custom"></TaskExecute>
        </div>
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>

<script setup lang="ts">
import {reactive, ref, watch} from "vue";
import TaskExecute from '../TaskExecute.vue'
import {NodeProperty} from "/@/views/flow/design/ts/FlowEventModel";
const isCollapse = ref(["1",'2'])
const businessObject = ref<NodeProperty>({
  name: '',
  id: '',
  assignee: '',
})
const callback = ref()
const formRef = ref()
const renderPanel = (businessObjectValue: NodeProperty,callbackValue: Function) => {
  callback.value = callbackValue
  if(!businessObjectValue.custom){
      businessObjectValue.custom = {
          user: [],
          org: [],
          role: [],
          post: [],
          relation: []
      }
  }
  businessObject.value = businessObjectValue
}
watch(() => businessObject.value, (newValue: any) => {
  let obj = {} as any

  for (let newValueKey in newValue) {
      obj[newValueKey] = newValue[newValueKey]
  }
  callback.value.call(undefined,obj)
}, {deep: true})

defineExpose({ renderPanel})
</script>

<style scoped>

</style>